<template>
    <!-- 维护作业-取消原因维护页面 -->
    <div class="fillcontain">
        <el-form :model="searchParams" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="6" class="common-box">
                    <el-col :span="8" class="common-lab">
                        <label class="labelName">取消原因代号</label>
                    </el-col>
                    <el-col :span="16">
                        <el-input clearable v-model="searchParams.noteitem" placeholder=""></el-input>
                    </el-col>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
            <el-row class="bgfff pb15">
                <el-col :span="24" class="pt5">
                    <el-button type="danger" plain @click="goAdd">新增</el-button>
                </el-col>
            </el-row>
            <!-- 查询结果 -->
            <div class="table_container">
                <el-table v-loading="loading" :data=" relationtableData" highlight-current-row header-cell-class-name="table-header-class"
                    style="width:100%">
                    <el-table-column min-width="120" property="noteitem" label="取消原因代号" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column property="notedesc" label="取消原因" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column property="flag01" label="备注1" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column property="flag02" label="备注2" align='center' show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column min-width="120" fixed="right" label="操作" align='center'>
                        <template slot-scope="scope">
                            <!-- <el-button type="text" size="small" @click.stop="relationUpdateGo(scope.row)">修改</el-button> -->
                            <span class="operationIcon" @click.stop="relationUpdateGo(scope.row)">
                            <el-tooltip class="item" effect="light" content="修改" placement="top">
                            <i class="el-icon-edit"></i>
                            </el-tooltip>
                        </span>
                            <!-- <el-button type="text" size="small" @click.stop="deleteFather(scope.row)">删除</el-button> -->
                            <span class="operationIcon ml5" @click.stop="deleteFather(scope.row)">
                            <el-tooltip class="item" effect="light" content="删除" placement="top">
                            <i class="el-icon-delete"></i>
                            </el-tooltip>
                        </span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24">
                        <div class="pagination">
                            <el-pagination background v-if='paginations.total > 0' :page-sizes="paginations.pageSizes" :page-size="paginations.pageSize"
                                :layout="paginations.layout" :total="paginations.total" :current-page='paginations.pageIndex'
                                @current-change='handleCurrentChange' @size-change='handleSizeChange'>
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 弹框 修改-->
        <el-dialog title="取消原因维护" :visible.sync="relationDialog" v-if="relationDialog" width="60%" center>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12" class="common-box">
                        <el-form-item label="取消原因代号" prop="noteitem">
                            <el-input v-if="status == 'update' " disabled v-model="form.noteitem"></el-input>
                            <el-input v-else maxlength='2' v-model="form.noteitem"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-form-item label="取消原因" prop="notedesc">
                            <el-input v-model="form.notedesc"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" class="common-box">
                        <el-form-item label="备注1" prop="flag01">
                            <el-input maxlength='1' v-model="form.flag01"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-form-item label="备注2" prop="flag02">
                            <el-input maxlength='1' v-model="form.flag02"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="save" class="Defaultbutton">保 存</el-button>
                <el-button @click="relationDialog = false">返 回</el-button> 
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import { queryListForFather, update, deleteFather, add } from '@/api/setting/maintain/cancelMaintenance.js';
    import { getSsyOrgMap } from "@/api/taskCenter/taskCommon";
    import request from '@/utils/axios';
    import validRules from "@/utils/validRules";
    import appName from "@/api/appName";
    export default {
        data() {
            return {
                relationDialog: false,//默认隐藏 保额累计关系维护修改弹框
                // 查询条件
                rules: {
                    noteitem: [
                        { required: true, message: '请输入取消原因代码', trigger: 'blur' },
                        { validator: validRules.isNumberorLetter, message: '请输入正确的取消原因代码', trigger: 'blur' }
                    ],
                    flag01: [
                        { max:1,validator: validRules.isNotChinese, message: '备注1不能输入中文', trigger: 'blur' }
                    ],
                    flag02: [
                        { max:1,validator: validRules.isNotChinese, message: '备注2不能输入中文', trigger: 'blur' }
                    ]
                },
                searchParams: {
                    noteitem: ''
                },
                relationtableData: [//数据
                ],
                loading: false,

                form: {
                    noteitem: '',
                    notedesc: '',
                    flag01: '',
                    flag02: ''
                },

                //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                status: "add",
                areatypeOption: [
                    {
                        label: '请选择',
                        value: ''
                    },
                    {
                        label: 'A',
                        value: 'A'
                    },
                    {
                        label: 'B',
                        value: 'B'
                    }
                ],
                ssyMap: []
            }
        },
        created() {
            //          this.getList();
            getSsyOrgMap().then(data => this.ssyMap = data);
        },
        mounted() {
            // this.getList();
        },
        methods: {
            save() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.$store.dispatch('loading/CHANGE_LOADING', true)
                        if (this.status == "add") {
                            request({
                                url: appName.NB + '/maintain/cancelReason/add',
                                method: 'post',
                                data: this.form
                            }).then(res => {
                                this.$store.dispatch('loading/CHANGE_LOADING', false)
                                if (res.resultCode == constant.SUCCESS) {
                                    this.relationDialog = false;
                                    this.$message({
                                        message: '新增成功',
                                        type: 'success'
                                    });
                                    this.searchParams.noteitem = this.form.noteitem;
                                    this.getList();
                                }

                            }).catch(err => {
                                this.$store.dispatch('loading/CHANGE_LOADING', false);
                            })
                        }
                        if (this.status == "update") {
                            request({
                                url: appName.NB + '/maintain/cancelReason/update',
                                method: 'post',
                                data: this.form
                            }).then(res => {
                                this.$store.dispatch('loading/CHANGE_LOADING', false)
                                if (res.resultCode == constant.SUCCESS) {
                                    this.relationDialog = false;
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    });
                                    this.getList();
                                }

                            }).catch(err => {
                                this.$store.dispatch('loading/CHANGE_LOADING', false);
                            })
                        }
                    }
                });

            },
            goAdd() {
                this.relationDialog = true;
                this.form.noteitem = "";
                this.form.notedesc = "";
                this.form.flag01 = "";
                this.form.flag02 = "";
                this.status = "add";
            },

            relationUpdateGo(row) {
                this.status = "update";
                this.relationDialog = true;
                this.form.noteitem = row.noteitem;
                this.form.notedesc = row.notedesc;
                this.form.flag01 = row.flag01;
                this.form.flag02 = row.flag02;
            },

            // 查询列表
            getList() {
                this.paginations.total = 0;
                this.relationtableData = [];
                let para = {
                    pageSize: this.paginations.pageSize,
                    pageNumber: this.paginations.pageIndex,
                    noteitem: this.searchParams.noteitem
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                queryListForFather(para).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.resultCode == constant.SUCCESS && res.data) {
                        if (res.data.list.length) {
                            this.paginations.total = res.data.total;
                            this.relationtableData = res.data.list;
                        } else {
                            this.$message({
                                message: '无符合条件资料！',
                                type: 'error'
                            });
                            this.relationtableData = [];
                            this.paginations.total = 0;
                        }
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
                this.paginations.pageSize = pageSize;
                this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
                this.paginations.pageIndex = page;
                this.getList();
            },
            // 根据条件查询列表
            subGetList() {
                this.paginations.pageIndex = 1;
                this.getList();
            },
            // 清除查询条件
            resetSearch() {
                this.searchParams.noteitem = '';
            },
            deleteFather(row) {

                this.$confirm("确认删除？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.$store.dispatch('loading/CHANGE_LOADING', true)
                    deleteFather(row).then(res => {
                        this.$store.dispatch('loading/CHANGE_LOADING', false)
                        if (res.resultCode == constant.SUCCESS) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.searchParams.noteitem = '';
                            this.getList();
                        }

                    }).catch(err => {
                        this.$store.dispatch('loading/CHANGE_LOADING', false);
                    })
                })

            }
        },
        computed: {
            ...mapGetters(['tags']),
            reload() {
                return this.$store.state.loading.reload;
            }
        },
        activated() {
            if (this.reload) {
                this.$store.dispatch('loading/CHNAGE_RELOAD', false)
                Object.assign(this.$data, this.$options.data());
            }
            document.onkeydown = (event)=>{
                  var e = event || window.event || arguments.callee.caller.arguments[0];
                  if (e && e.keyCode == 113) {
                      this.getList();
                  }
              };
        }
    }

</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;
    }

    .search_container {
        padding: 20px 20px 0 20px; //    border-top: 1px solid #e1e1e1;
    }

    .common-box {
        padding-bottom: 15px;
    }

    .common-lab {
        line-height: normal!important;
        text-align: right;
        .labelName {
            text-align: right;
        }
    }
</style>